<template>
	<div>
		<div class="am-g">
			<!-- LOGO -->
			<div class="am-u-sm-12 am-text-center" >
				 <i class="am-icon-twitch myapp-login-logo"></i>
			</div>
			<!-- 登陆框 -->
			<div class="am-u-sm-11 am-u-sm-centered">
				<!-- .prevent 事件的修饰符，这个是阻止表单提交-->
			<form class="am-form" action="" method="post" v-on:submit.prevent="loginAct" style="margin-bottom: 20px;">
			  <fieldset class="myapp-login-form am-form-set">
				<div class="am-form-group am-form-icon">
					<i class="am-icon-user"></i>
					<input type="text" v-model="user" class="myapp-login-input-text am-form-field" placeholder="请输入账号" required>
				</div>
			    <div class="am-form-group am-form-icon">
					<i class="am-icon-lock"></i>
					<input type="password" v-model="pwd" class="myapp-login-input-text am-form-field" placeholder="请输入密码(至少6个字符)" required>
				</div>
			  </fieldset>
			  <button type="submit" class="am-btn am-btn-warning am-btn-block am-round">登 陆</button>
			</form>
			<button type="button" class="am-btn am-btn-secondary am-btn-block am-round"><router-link to="/register"><span>注 册</span></router-link></button>
			</div>
			<div class="am-text-center am-u-sm-11 am-u-sm-centered myapp-login-form-shortcut">
				<hr class="myapp-login-form-hr" />
				<span class="myapp-login-form-hr-font">第三方登陆</span>
			</div>

			<div class="am-u-sm-12 am-text-center myapp-login-form-listico" >
				 <div class="am-u-sm-4 am-text-center" >
				 <i class="am-icon-btn am-primary am-icon-qq"></i>
				 </div>
				 <div class="am-u-sm-4 am-text-center" >
				 <i class="am-icon-btn am-danger am-icon-weibo"></i>
				 </div>
				 <div class="am-u-sm-4 am-text-center" >
				 <i class="am-icon-btn am-success am-icon-weixin"></i>
				 </div>
			</div>


		</div>
	</div>
</template>

<script>
	export default{
		name:'login',
		components:{},	// 再加 子组件
		data(){
			return {
				user: '',	// 变量必须加初始值
				pwd: '',
			}
		},
		// 方法
		created(){
		},
		mounted(){
			// 插件调用代码，自己写的脚本代码
			
		},
		// 计算属性
		computed:{
			// 写函数
		},
		methods:{
			// 写事件函数
			loginAct(){
				// 提交数据（组件不写异步操作）
				let login = {
					user:this.$data.user,
					pwd:this.pwd,
					router:this.$router,	// vue的路由对象
					alert:this.$alert
				}
				// console.log(login)
				// 这里是调用控制器的方法，去写业务判断
				// 这句，是调用中间件 my.js 的方法
				this.$store.dispatch('actLogin',login)
			}
		}
	}
</script>

<style>
	.am-btn{
		font-size: 0.7rem;
	}
	span{
		color: white!important;
	}
</style>